class Signup{
    constructor(){
        //实例属性
        //获取所需要的元素
        //用户名
        this.us = document.querySelector('#us');
        //密码
        this.ps = document.querySelector('#ps');
        //确定密码
        this.sure = document.querySelector('#sure');
        //注册按钮
        this.ret = document.querySelector('#submit');

        this.clb = document.querySelector('#clb')

        this.arr = [false,false,false];
       
        //添加事件
        this.addEvent();
    }
    addEvent(){
        //记录this
        //记录this
        let that = this;
        //用户名可能包含中文、大小写字母、和数字
        this.us.onblur = function(){
            //规则
            let re = /^[\u4e00-\u9fa5a-zA-Z0-9]{6,12}$/;
            //检测内容
            let us = this.value;
            //进行检测
            if(re.test(us)){
                this.style.border = '2px  solid  #00FF00'
                this.style.boxShadow = '0px -5px 10px 0px #00FF00'
                this.style.borderRadius = '10px';
                that.arr[0] = true;
            }else{
                this.style.border = '2px  solid  #CC0000'
                this.style.boxShadow = '0px -5px 10px 0px #CC0000'
                this.style.borderRadius = '10px';
                that.arr[0] = false;
            }
        }
        this.ps.onblur = function(){
            //规则
            let re = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
            //检测内容
            let ps = this.value;
            //进行检测
            if(re.test(ps)){
                this.style.border = '2px  solid  #00FF00'
                this.style.boxShadow = '0px -5px 10px 0px  #00FF00'
                this.style.borderRadius = '10px';
                that.arr[1] = true;
            }else{
                this.style.border = '2px  solid  #CC0000'
                this.style.boxShadow = '0px -5px 10px 0px #CC0000'
                this.style.borderRadius = '10px';
                that.arr[1] = false;
            }
        }
        this.sure.onblur = function(){
            //第一次密码：
            let ps = that.ps.value;
            //第二次密码
            let pass = this.value;
            //判断是否相同 
            if(ps === pass){
                this.style.border = '2px  solid   #00FF00'
                this.style.boxShadow = '0px -5px 10px 0px  #00FF00'
                this.style.borderRadius = '10px';
                that.arr[2] = true;
            }else{
                this.style.border = '2px  solid  #CC0000'
                this.style.boxShadow = '0px -5px 10px 0px #CC0000'
                this.style.borderRadius = '10px';
                that.arr[2] = false;
            }
        }
        this.ret.onclick = function(){
            //检测开关
            if(that.arr.includes(false)){
                alert('两次密码不一致！');
            }else{
                //后端验证
                //获取当前用户名
                let us = that.us.value;
                //获取密码
                let ps = that.ps.value;
               
                //检测后端是否有我当前注册的用户
                //1. 获取后端数据
                //如果当前cookie中有数据，则返回字符串，如果没有数据，则返回undefeined,为了方便转为对象，则将undefined转为''
                let cookie_str = cookie.get('registors') ? cookie.get('registors') : '';
                //2. 转为对象
                let cookie_obj = cookie.convertStrToObj(cookie_str);
                //3. 检测对象中是否有当前注册的用户
                if(us in cookie_obj){
                    //如果cookie中已经存在当前的用户名，则提示用户
                    alert('用户名已存在！');
                }else{
                    //不存在，添加到对象中
                    cookie_obj[us] = ps;
                    //将对象转为json字符串，存入cookie中
                    cookie.set('registors',JSON.stringify(cookie_obj),{expires : 5,path : '/'});
                    alert('注册成功！');
                }
            }
        }
        this.clb.onclick = function(){
            location.href = './login.html';
        }
        
    }
    
}
new Signup();